<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单控件</title>
	<link rel="stylesheet" href="../../include/css/public.min.css">
	<link rel="stylesheet" href="../../include/css/iconfont.min.css">
	<link rel="stylesheet" href="../doc-lib/solarized-light.css">
	<link rel="stylesheet" href="../doc-lib/doc.css">
</head>
<body>
    <div class="page-cont">
	    <div class="crumb"></div>
        <div class="page-title">
			<h2>表单控件</h2>
			<p>表单控件用于响应及采集不同类型的用户输入。</p>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 基本类型</h4>
			<div class="section-cont">
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<strong>实例</strong>
					</div>
					<div class="grid-col grid-col-9">
						<strong>代码</strong>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="text" class="input" placeholder="文本框">
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="text" class="input" placeholder="文本框"&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="password" class="input" placeholder="密码框">
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="password" class="input" placeholder="密码框"&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<textarea class="input" rows="3" placeholder="多行文本框"></textarea>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;textarea class="input" rows="3" placeholder="多行文本框"&gt;&lt;/textarea&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<label>
							<input type="radio" name="radio1" checked>
							<span>单选1</span>
						</label>
						<label>
							<input type="radio" name="radio1">
							<span>单选2</span>
						</label>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;label&gt;
    &lt;input type="radio" name="radio1" checked&gt;  /* 有 checked 属性，会默认选中 */
    &lt;span&gt;单选1&lt;/span&gt;
&lt;/label&gt;
&lt;label&gt;
    &lt;input type="radio" name="radio1"&gt;
    &lt;span&gt;单选2&lt;/span&gt;
&lt;/label&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<label>
							<input type="checkbox">
							<span>勾选我</span>
						</label>
						<label>
							<input type="checkbox">
							<span>还可以勾选我</span>
						</label>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;label&gt;
    &lt;input type="checkbox"&gt;
    &lt;span&gt;勾选我&lt;/span&gt;
&lt;/label&gt;
&lt;label&gt;
    &lt;input type="checkbox"&gt;
    &lt;span&gt;还可以勾选我&lt;/span&gt;
&lt;/label&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<select class="btn">
							<optgroup label="水果">
								<option>苹果</option>
								<option>香蕉</option>
								<option>葡萄</option>
							</optgroup>
							<optgroup label="蔬菜">
								<option>西兰花</option>
								<option>茄子</option>
								<option>西红柿</option>
							</optgroup>
						</select>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;select class="btn"&gt;
    &lt;optgroup label="水果"&gt;  /* optgroup 用于列表项分组 */
    	&lt;option&gt;苹果&lt;/option&gt;
    	&lt;option&gt;香蕉&lt;/option&gt;
    	&lt;option&gt;葡萄&lt;/option&gt;
    &lt;/optgroup&gt;
    &lt;optgroup label="蔬菜"&gt;
    	&lt;option&gt;西兰花&lt;/option&gt;
    	&lt;option&gt;茄子&lt;/option&gt;
    	&lt;option&gt;西红柿&lt;/option&gt;
    &lt;/optgroup&gt;
&lt;/select&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="file" class="input">
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="file" class="input"&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
		<div class="section">
			<h4 class="section-title"><i class="iconfont icon-subtraction"></i> 不可用状态</h4>
			<div class="section-cont">
				<p>1. 为文本框加上 <code>readonly</code> 属性可使其只读（不可写入）。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<strong>实例</strong>
					</div>
					<div class="grid-col grid-col-9">
						<strong>代码</strong>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="text" class="input" placeholder="文本框只读" readonly>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="text" class="input" placeholder="文本框只读" readonly&gt;</code></pre>
					</div>
				</div>
				<p class="mt15">2. 为表单控件加上 <code>disabled</code> 属性可使其禁用。</p>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<strong>实例</strong>
					</div>
					<div class="grid-col grid-col-9">
						<strong>代码</strong>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="text" class="input" value="文本框被禁用" disabled>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="text" class="input" value="文本框被禁用" disabled&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<textarea class="input" rows="2" disabled>多行文本框被禁用</textarea>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;textarea class="input" rows="2" disabled&gt;多行文本框被禁用&lt;/textarea&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<label>
							<input type="radio" name="radio2" checked disabled>
							<span>单选1</span>
						</label>
						<label>
							<input type="radio" name="radio2" disabled>
							<span>单选2</span>
						</label>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;label&gt;
    &lt;input type="radio" name="radio2" checked disabled&gt;
    &lt;span&gt;单选1&lt;/span&gt;
&lt;/label&gt;
&lt;label&gt;
    &lt;input type="radio" name="radio2" disabled&gt;
    &lt;span&gt;单选2&lt;/span&gt;
&lt;/label&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<label>
							<input type="checkbox" disabled>
							<span>勾选我</span>
						</label>
						<label>
							<input type="checkbox" disabled>
							<span>还可以勾选我</span>
						</label>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;label&gt;
    &lt;input type="checkbox" disabled&gt;
    &lt;span&gt;勾选我&lt;/span&gt;
&lt;/label&gt;
&lt;label&gt;
    &lt;input type="checkbox" disabled&gt;
    &lt;span&gt;还可以勾选我&lt;/span&gt;
&lt;/label&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<select class="btn" disabled>
							<optgroup label="水果">
								<option>苹果</option>
								<option>香蕉</option>
								<option>葡萄</option>
							</optgroup>
							<optgroup label="蔬菜">
								<option>西兰花</option>
								<option>茄子</option>
								<option>西红柿</option>
							</optgroup>
						</select>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;select class="btn" disabled&gt;
    ...
&lt;/select&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<select class="btn">
							<option>苹果</option>
							<option disabled>香蕉</option>
							<option>葡萄</option>
						</select>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;select class="btn"&gt;
    &lt;option&gt;苹果&lt;/option&gt;
    &lt;option disabled&gt;香蕉&lt;/option&gt;  /* “香蕉”被禁用 */
    &lt;option&gt;葡萄&lt;/option&gt;
&lt;/select&gt;</code></pre>
					</div>
				</div>
				<div class="grid-row">
					<div class="grid-col grid-col-3">
						<input type="file" class="input" disabled>
					</div>
					<div class="grid-col grid-col-9">
						<pre><code class="html">&lt;input type="file" class="input" disabled&gt;</code></pre>
					</div>
				</div>
			</div>
		</div>
    </div>
    <script src="../../include/js/jquery-1.11.3.min.js"></script>
    <script src="../../include/js/public.min.js"></script>
	<script src="../doc-lib/highlight.pack.js"></script>
	<script src="../doc-lib/doc.js"></script>
    <script>
		hljs.initHighlightingOnLoad();
    </script>
</body>
</html>
